<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table :data="list" border stripe>
      <el-table-column type="index" width="50" />
      <el-table-column prop="customerId" label="会员编号" />
      <el-table-column prop="customerName" label="会员姓名" />
      <el-table-column prop="customerSex" label="性别" />
        <el-table-column prop="customerMobile" label="手机" />
         <el-table-column prop="customerImg" label="头像" />
      <el-table-column prop="createTime" label="创建日期" />
       <el-table-column prop="updateTime" label="更新日期" />
      <el-table-column prop="customerBanlance" label="余额" />
      <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">  
            <!-- 删除按钮 开始-->
               <router-link :to="'/core/customer/edit/' + scope.row.id" style="margin-right:5px;" >
                <el-button type="primary" size="mini" icon="el-icon-edit">
                    修改
                </el-button>
             </router-link>
              <!-- 删除按钮 结束-->
             <!-- 删除按钮 -->
            <el-button
                   type="danger"
                   size="mini"
                   icon="el-icon-delete"
                   @click="removeById(scope.row.id)"
                   >
            删除
            </el-button>
            <!-- 删除按钮结束 -->
         </template>
      </el-table-column>
    </el-table>
  </div>
</template>

//  页面组件脚本 开始
<script>
import customerApi from '@/api/core/customer'
export default {
  // 定义数据模型
  data() {
    return {
        list: [] // 数据列表
    }
  },
  // 页面渲染成功后获取数据
  created() {
    this.fetchData()
  },
  // 定义方法
  methods: {
    fetchData() {
      // 调用api
        customerApi.list().then(response => {
          console.log(response.data.list)
        this.list = response.data.list
      })
    },
    // 根据id删除数据
removeById(id) {
  this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
        customerApi.removeById(id).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    })
    .catch(error => {
      this.$message.info('取消删除')
    })
}

  }
}
</script>
// 页面组件脚本 结束